<template>
	<div>
		<a-modal
			v-model:open="visible"
			:centered="true"
			width="100%"
			wrap-class-name="full-modal"
			:footer="null"
			destroy-on-close
			@cancel="onCancel"
		>
			<div class="alarm-modal">
				<div class="carousel-wrap">
					<!-- <a-button class="alone-icon-button" :class="[dataList.length === 1 && 'hidden']" :disabled="activeIndex === 0" @click.stop="prev">
						<i class="iconfont icon-arrow-left-s-line"></i>
					</a-button> -->

					<global-svg-icon
						style="cursor: pointer"
						icon-name="warning-detail-arrow-left"
						:class="[dataList.length === 1 && 'hidden']"
						:disabled="activeIndex === 0"
						width="32px"
						height="40px"
						@click.stop="prev"
					></global-svg-icon>

					<div :key="activeIndex" class="carousel-item">
						<global-image
							v-if="dataList[activeIndex]?.type === 'image'"
							:error="defaultImage"
							:scalable="true"
							:src="dataList[activeIndex]?.image"
						></global-image>

						<video
							id="video"
							v-else
							autoplay
							class="video"
							controls
							muted
							:onerror="
								(e: any) => {
									e.target.poster = defaultImage;
									e.target.onerror = null;
								}
							"
							:poster="dataList[activeIndex]?.image"
						>
							<source :src="dataList[activeIndex]?.video" type="video/mp4" />
						</video>
					</div>
					<!-- <a-button
						type="default"
						class="alone-icon-button"
						:class="[dataList.length === 1 && 'hidden']"
						:disabled="dataList.length === 0 || activeIndex === dataList.length - 1"
						@click.stop="next"
					> -->
					<!-- </a-button> -->
					<global-svg-icon
						style="cursor: pointer"
						:class="[dataList.length === 1 && 'hidden']"
						:disabled="dataList.length === 0 || activeIndex === dataList.length - 1"
						icon-name="warning-detail-arrow-right"
						width="32px"
						height="40px"
						@click.stop="next"
					></global-svg-icon>
				</div>
				<div v-if="!hideInfo" class="carousel-info">
					<div>
						<div>
							<div>{{ dataList[activeIndex]?.tag || '' }}</div>
							<h6>{{ dataList[activeIndex]?.title || '' }}</h6>
						</div>
						<p>{{ dataList[activeIndex]?.time || '' }}</p>
					</div>
					<div style="display: flex; gap: 8px">
						<a-button type="default" class="icon-button" @click="handleDownLoad('AI')">
							<global-svg-icon icon-name="download-2-line" width="16px" height="16px"></global-svg-icon>

							下载
						</a-button>
						<a-button v-if="isDebug" type="default" class="icon-button" @click="handleDownLoad('origin')">
							<global-svg-icon icon-name="download-2-line" width="16px" height="16px"></global-svg-icon>

							下载原图
						</a-button>
					</div>
				</div>
			</div>
		</a-modal>
	</div>
</template>

<script setup lang="ts">
import { nextTick, onUnmounted, ref, computed } from 'vue';
import { Carousel } from 'ant-design-vue';
import { getFileName2, getFileSuffix } from '@/global-utils/base.utils';
import defaultImage from '@/global-assets/imgs/alarm-img-example.png';

// import { GImage } from 'g6-ui'
import { useRoute } from 'vue-router';

defineProps({
	hideInfo: {
		type: Boolean,
		default: false
	}
});

export type ResourceType = 'image' | 'video';
export interface CarouselDataProps {
	id?: number;
	type?: ResourceType;
	image?: string;
	video?: string;
	time?: string;
	title?: string;
	tag?: string;
	downLoadLink?: string;
}
const carouselRef = ref<typeof Carousel>();

const activeIndex = ref(0);
const dataList = ref<CarouselDataProps[]>([]);

// 上一张
const prev = (): void => {
	if (activeIndex.value === 0) {
		return;
	}
	activeIndex.value--;
	carouselRef.value?.prev();
};
// 下一张
const next = (): void => {
	if (activeIndex.value === dataList.value.length - 1) {
		return;
	}
	activeIndex.value++;
	carouselRef.value?.next();
};
// 键盘快捷键切换图片
const switchover = (e: KeyboardEvent): void => {
	if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
		prev();
	} else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
		next();
	}
};
window.addEventListener('keydown', switchover);

const visible = ref(false);
const route = useRoute();

const isDebug = computed(() => {
	return route.query.isDebug;
});

const onCancel = (): void => {
	visible.value = false;
};

// 下载
const handleDownLoad = (type: 'AI' | 'origin'): void => {
	const data = dataList.value[activeIndex.value];
	let downLink = data.downLoadLink;
	if (type === 'origin') {
		downLink = `${getFileName2(data.downLoadLink)}-A.${getFileSuffix(data.downLoadLink)}`;
	}
	const a = document.createElement('a');
	a.href = downLink || '';
	a.download = `${Date.now()}-${data.tag || ''}-${data.title}${type === 'origin' ? '-A' : ''}.${
		data.type === 'image' ? getFileSuffix(data.image) : getFileSuffix(data.video)
	}`;
	a.click();
	a.remove();
};

const openModal = (data: CarouselDataProps[], index = 0): void => {
	console.log('dataList:', data);

	dataList.value = data;
	activeIndex.value = index;
	visible.value = true;
	nextTick(() => {
		const box = document.querySelector('.carousel-item');
		const video = document.querySelector('#video') as HTMLVideoElement;
		if (video) {
			video.width = box?.clientWidth || 1080;
			video.height = box?.clientHeight || 622;
		}
		carouselRef.value?.goTo(index, true);
	});
};

const closeModal = (callback: any): void => {
	visible.value = false;
	callback && callback();
};
defineExpose({
	openModal,
	closeModal
});

onUnmounted(() => {
	window.removeEventListener('keydown', switchover);
});
</script>

<style lang="less" scoped>
.alarm-modal {
	display: flex;
	height: 100%;
	padding: 0 170px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.carousel-wrap {
	display: flex;
	width: 100%;
	margin-top: 12px;
	align-items: center;
	justify-content: center;
	gap: 0 8px;

	// .alone-icon-button {
	// 	display: flex;
	// 	width: 32px;
	// 	height: 40px;
	// 	border-radius: 6px;
	// 	font-size: 20px;
	// 	color: @text01;
	// 	flex-shrink: 0;
	// 	align-items: center;
	// 	justify-content: center;

	// 	&.hidden {
	// 		visibility: hidden;
	// 	}
	// }

	div {
		overflow: hidden;
		width: 100%;
		height: 803px;
		border-radius: 4px;
		background: @textSecondary01;

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		video {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	.carousel-item {
		width: 100%;
		height: 802px;
		background: @background02;

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		video {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
}

.carousel-info {
	display: flex;
	width: 100%;
	margin: 0 auto;
	margin-top: 16px;
	padding: 0 40px;
	justify-content: space-between;

	div {
		div {
			display: flex;
			font-size: 16px;
			color: @text01;
			align-items: center;
			gap: 0 8px;

			div {
				height: 30px;
				border-radius: 4px;
				padding: 0 6px;
				font-size: 16px;
				line-height: 30px;
				color: @text01;
				background: @secondary03;
			}

			h6 {
				font-size: 16px;
				font-weight: 700;
				color: @text02;
			}
		}

		p {
			margin-top: 8px;
			font-size: 12px;
			font-weight: 400;
			color: @text02;
		}
	}

	.icon-button {
		border: 1px solid @borderColor02;
		padding: 7px 16px;
		color: @text01;
		background: transparent;

		.icon-download-2-line {
			margin-right: 6px;
			color: @text02;
		}
	}
}
//所有控件
video::-webkit-media-controls-enclosure {
	width: 100%;
}
</style>
